<template>
  <div id="app">
    <div class="header">
      <div class="title">智慧知府</div>
      <div class="log">{{ $ws.log }}</div>
    </div>
    <div class="lr">
      <div class="sider">
        <div class="links"
          v-for="(item, index) in $router.options.routes"
          :key="index"
          @click="item.path == $route.path ? '' : $router.push(item.path)">
          <span>{{item.name}}</span>
          </div>
      </div>
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
    
    
  </div>
</template>

<script>

export default {
  created() {
    let listen = location.search.match(/listen=([0-9]+)/)
    this.$ws.listen(listen ? listen[1] : null) 
  }
}
</script>

<style>
#app {
  background-color: #dcd8cc;
  background-size: cover;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  font-family: kaiti;
  font-weight: 900;
  font-size: 24px;
  color: black;
}

.row {
  display: flex;
  /* flex-flow: column; */
  padding: 12px;
  align-items: center;
  /* margin-bottom: 24px; */
}
</style>

<style scoped>
.lr {
  display: flex;
  height: calc(100vh - 40px);
  width: 100%;
}
.sider {
  height: 100%;
  width: 200px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.125);
}
.links {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: 0.25s;
}
.links:hover {
  background-color:#efece4;
  letter-spacing: 0.125em;
}

.header {
  display: flex;
  height: 3em;
  background-color: #bbb399;
  align-items: center;
  padding: 0 1.5em;
  position: relative;
  z-index: 0;
  box-shadow: 0 0 5px rgba(0,0,0,0.125);
}
.title {
  color: #000;
  font-size: 1.5em;
  margin-right: 0.5em;
}

.action-list {
  display: flex;
  margin-bottom: 24px;
}
.action {
  cursor: pointer;
  user-select: none;
  padding: 5px 15px;
  background-image: linear-gradient(135deg, #71538c, #4b00ff);
  color: white;
  border-radius: 5px;
  
  margin: 0 12px;
}
.log {
  color: white;
}

.main {
  padding: 0.5em;
  height: calc(100vh - 3em);
  width: calc(100vw - 200px);
}
</style>
